<template>
  <div id="shareWordList">
    <!-- 上部搜索条件 -->
    <topSearch
      v-if="streamStatus"
      :form-inline="formInline"
      @toSearch="toSearch"
      :streamStatus="streamStatus"
      :closeStatus="closeStatus"
    ></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="share-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="700"
      ref="table"
    >
      <el-table-column type="index" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="user.userName" label="昵称" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.user.userName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="user.dpAccount" label="大鹏号" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.user.dpAccount || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="verificationMobile" label="验证手机号" width="150">
        <template slot-scope="scope">
          <span style="width: 100%;">{{
            scope.row.verificationMobile || '-'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="真实姓名" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.realName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.idCard || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createType" label="认证来源" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.createType === 'ADMIN' ? '后台' : '前台' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="roomNum" label="房间号" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.roomNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fansCount" label="总粉丝数" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.fansCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="streamerPeriodLast.channel"
        label="直播渠道"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{
            filterName(
              scope.row.streamerPeriodLast.channel,
              'live_streaming_channel'
            )
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="streamerPeriodLast.liveTypeName"
        label="最新直播分类"
        width="130"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.streamerPeriodLast.liveTypeName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="streamerPeriodLast.liveTitle"
        label="最新直播标题"
        width="130"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.streamerPeriodLast.liveTitle || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="streamerPeriodLast.livePic"
        label="最新直播封面"
        width="220"
      >
        <template slot-scope="scope">
          <el-image
            fit="cover"
            style="width: 150px; height: 100px"
            :src="scope.row.streamerPeriodLast.livePic"
            :preview-src-list="[scope.row.streamerPeriodLast.livePic]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="streamerPeriodLast.streamingStatus"
        label="直播状态"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.streamingStatus">{{
            filterName(scope.row.streamingStatus, 'live_streaming_status')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="closeStatus" label="封禁状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.closeStatus">{{
            filterName(scope.row.closeStatus, 'live_streamer_close_status')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="streamerPeriodLast.startTime"
        label="最新开播时间"
        width="230"
      ></el-table-column>
      <el-table-column prop="operBy.userName" label="操作人" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.operBy.userName">{{
            scope.row.operBy.userName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="closeTime"
        label="封禁时间"
        width="230"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.closeStatus"
            type="text"
            @click="closeOption(scope.row)"
          >
            {{ scope.row.closeStatus === 'OPEN' ? '封禁直播' : '解封' }}
          </el-button>
          <el-button @click="viewSession(scope.row)" type="text">
            查看场次
          </el-button>
          <el-button @click="viewData(scope.row)" type="text">
            查看数据
          </el-button>
          <el-button
            v-if="scope.row.closeStatus === 'OPEN'"
            @click="changToVIP(scope.row)"
            type="text"
          >
            认证身份
          </el-button>
          <el-button @click="editLiveTypeEvent(scope.row)" type="text">
            编辑分类
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <el-dialog
      title="编辑直播分类"
      :destroy-on-close="true"
      :visible.sync="editLiveTypeDialogVisible"
      style="height: 700px;"
      width="30%"
    >
      <el-form :model="closeForm">
        <el-form-item label="修改分类">
          <template>
            <el-select v-model="liveType.value" placeholder="请选择">
              <el-option
                v-for="item in liveTypes"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button
            size="medium"
            type="info"
            @click="editLiveTypeDialogVisible = false"
            >取消</el-button
          >
          <el-button size="medium" type="primary" @click="changeLiveTypeEvent"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      @close="close"
      title="封禁直播"
      :destroy-on-close="true"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="closeForm">
        <el-form-item label="封禁原因">
          <el-input
            type="textarea"
            maxlength="200"
            v-model="closeForm.closeMemo"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="封禁截图">
          <uploadImgCom
            @setImgInfo="setImgInfo"
            :maxLength="3"
            :maxSize="1"
            :singleFile="3"
          ></uploadImgCom>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="patchLiveStreamerClose"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <anchorDetailsDialog
      v-if="anchorDetailsInline.dialogTableVisible"
      :anchorDetailsInline="anchorDetailsInline"
    ></anchorDetailsDialog>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import topSearch from './topSearch' // 上部搜索条件
import uploadImgCom from '@common/uploadImg' // 上传图片公共组件
import anchorDetailsDialog from '@/components/anchor/anchorListManage/anchorDetailsDialog'
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  patchLiveStreamerClose,
  getAnchorList,
  patchLiveStreamerOpen,
  patchLiveStreamerIdentification,
  patchLiveStreamerLiveType,
  postAnchor,
  getAnchorDetail
} from '@/api/anchor/anchor-list'
import { getLiveTypes } from '@/api/anchor/live-type'
export default {
  name: 'anchorListManage',
  msg: '主播列表管理-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    uploadImgCom,
    anchorDetailsDialog
  },
  data() {
    return {
      anchorDetailsInline: {
        dialogTableVisible: false,
        dpAccount: ''
      },
      rejectReasonData: null,
      rejectReasonVisible: false,
      fileList: new Array(),
      closeForm: {
        closeMemo: '',
        closePic: '',
        id: ''
      },
      dialogFormVisible: false,
      loading: true,
      total: 0,
      // 搜索条件
      formInline: {
        closeStatus: '', // 封禁状态
        streamingStatus: '', // 用户类型,默认全部
        collegeId: '', // 学院,默认全部
        title: '', // 标题
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给新增弹框的数据
      addDialogData: {
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '创建分享语管理',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      // 选择框选中的数据
      multipleSelection: [],
      // 认证状态列表
      streamStatus: [],
      closeStatus: [],
      hideBool: '',
      liveTypes: [],
      editLiveTypeDialogVisible: false,
      liveType: {
        id: '',
        value: ''
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
    this.getStatusList()
  },
  methods: {
    close() {
      this.closeForm.closeMemo = ''
      this.fileList = []
    },
    //查看数据
    viewData(scope) {
      this.anchorDetailsInline.dpAccount = scope.user.dpAccount
      this.anchorDetailsInline.dialogTableVisible = true
      this.anchorDetailsInline.dialogTitle = '个人直播数据查看'
    },
    // 查看场次
    viewSession({ id }) {
      this.$router.push({
        name: 'wh:anchor:liveSessionManage',
        query: {
          id
        }
      }) // 只能用 name
    },
    // 更改分类
    changeLiveTypeEvent() {
      if (!this.liveType.value) {
        this.$message({
          message: '请选择分类后操作',
          type: 'warning'
        })
        return false
      }
      patchLiveStreamerLiveType(
        { id: this.liveType.id, liveTypeId: this.liveType.value },
        (response) => {
          this.editLiveTypeDialogVisible = false
          this.searchList()
        },
        (response) => {
          this.editLiveTypeDialogVisible = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 弹出编辑分类
    editLiveTypeEvent({ id, name }) {
      this.liveType.id = id
      this.liveType.value = name
      getLiveTypes(
        { status: 'ENABLE', parentId: 0, pageSize: 100 },
        (response) => {
          this.editLiveTypeDialogVisible = true
          this.liveTypes = response.rows
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 认证身份
    changToVIP({ id, identity }) {
      // 已认证身份
      if (identity === 1) {
        this.$message({
          message: '该用户已成为大V身份',
          type: 'success'
        })
        return false
      }
      this.$confirm('是否确认该用户成为大V身份？', '认证身份')
        .then((_) => {
          patchLiveStreamerIdentification(
            { id },
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    // 解禁|封禁
    closeOption({ closeStatus, id }) {
      if (closeStatus === 'OPEN') {
        this.dialogFormVisible = true
        this.closeForm.id = id
      } else {
        this.$confirm('是否确认该用户解封直播间？', '解封直播')
          .then((_) => {
            patchLiveStreamerOpen(
              { id },
              (response) => {
                this.searchList()
              },
              (response) => {
                this.$message({
                  message: response.message,
                  type: 'warning'
                })
              }
            )
          })
          .catch(() => {})
      }
    },
    viewRejectReason(row) {
      this.rejectReasonData = row
      this.rejectReasonVisible = true
    },
    /* 字典英文转汉字 */
    filterName(id, name) {
      let obj = this.$store.state['valueTokey'][name]
      if (id && obj && obj[id]) {
        return obj[id].name
      }
      return ''
    },
    /* 获取字典状态 */
    async getStatusList() {
      //推流状态状态列表
      let data = await sysNormalDisable(
        'live_streaming_status',
        'live_streaming_status'
      )
      this.streamStatus = data
      // 封禁状态
      let closeStatus = await sysNormalDisable(
        'live_streamer_close_status',
        'live_streamer_close_status'
      )
      this.closeStatus = closeStatus
      //推流状态状态列表
      let channel = await sysNormalDisable(
        'live_streaming_channel',
        'live_streaming_channel'
      )
      //推流状态状态列表
      let anchorResource = await sysNormalDisable(
        'live_streamer_from',
        'live_streamer_from'
      )
    },
    // 封禁主播
    patchLiveStreamerClose() {
      if (!this.closeForm.closeMemo) {
        this.$message({
          message: '请输入封禁原因',
          type: 'warning'
        })
        return false
      }
      // if (this.fileList.length === 0) {
      //   this.$message({
      //     message: '请上传封禁截图',
      //     type: 'warning'
      //   })
      //   return false
      // }
      this.closeForm.closePic = this.fileList.join(',')
      patchLiveStreamerClose(
        this.closeForm,
        (res) => {
          this.dialogFormVisible = false
          this.searchList()
        },
        (res) => {
          console.log(res)
        }
      )
    },
    setImgInfo(values) {
      this.fileList = []
      values.forEach((ele) => {
        this.fileList.push(ele.url)
      })
    },
    // 审核驳回弹窗显示
    rejectAuth(id) {
      this.authForm.id = id
      this.dialogFormVisible = true
    },
    // 审核通过
    authPass(id) {
      this.$confirm(`<span>是否确认该用户通过直播申请？</span>`, '通过申请', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          putLivesVerfyings(
            { id },
            (response) => {
              this.tableData = response.rows
              this.total = response.total
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign(this.searchParams, this.formInline)
      delete obj.createTime
      let params = obj
      getAnchorList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 新增后，刷新列表 */
    refresh() {
      this.formInline = {
        closeStatus: '',
        streamingStatus: '',
        collegeId: '',
        title: '',
        startTime: '',
        endTime: '',
        createTime: []
      }
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#shareWordList {
  .el-table {
    margin-top: 20px;
  }
}
.hide .el-upload--picture-card {
  display: none;
}
.el-upload-list__item,
.el-upload {
  margin-left: 10px !important;
}
</style>
